<script setup lang="ts" name="Toolbar">
import { ElIcon } from 'element-plus';
import { AddThree, FolderOpen, SaveOne, PlayOne, SettingTwo, FileAddition } from '@icon-park/vue-next';
import { defineProps, ref, computed, onMounted } from 'vue';

const props = defineProps({
})

const emit = defineEmits([
    'showNodeTypeList',
    'createFlow',
    'loadFlow',
    'saveFlow',
    'playFlow',
    'showSetting'
]);

function showNodeTypeList() {
    emit('showNodeTypeList')
}

function createFlow() {
    emit('createFlow')
}

function loadFlow() {
    emit('loadFlow')
}

function saveFlow() {
    emit('saveFlow')
}

function playFlow() {
    emit('playFlow')
}

function settingFlow() {
    emit('showSetting')
}

</script>

<template>
    <div class="toolbar-container">
        <el-tooltip content="新增节点" placement="top" effect="light">
            <div class="botton" @click="showNodeTypeList()">
                <el-icon :size="20">
                    <AddThree theme="outline" size="24" fill="#333" />
                </el-icon>
            </div>
        </el-tooltip>
        <el-tooltip content="新增工作流" placement="top" effect="light">
            <div class="botton" @click="createFlow">
                <el-icon :size="20">
                    <FileAddition theme="outline" size="24" fill="#333" />
                </el-icon>
            </div>
        </el-tooltip>
        <el-tooltip content="加载工作流" placement="top" effect="light">
            <div class="botton" @click="loadFlow">
                <el-icon :size="20">
                    <FolderOpen theme="outline" size="24" fill="#333" />
                </el-icon>
            </div>
        </el-tooltip>
        <el-tooltip content="保存工作流" placement="top" effect="light">
            <div class="botton" @click="saveFlow">
                <el-icon :size="20">
                    <SaveOne theme="outline" size="24" fill="#333" />
                </el-icon>
            </div>
        </el-tooltip>
        <el-tooltip content="运行工作流" placement="top" effect="light">
            <div class="botton" @click="playFlow">
                <el-icon :size="20">
                    <PlayOne theme="outline" size="24" fill="#333" />
                </el-icon>
            </div>
        </el-tooltip>
        <el-tooltip content="设置工作流" placement="top" effect="light">
            <div class="botton" @click="settingFlow">
                <el-icon :size="20">
                    <SettingTwo theme="outline" size="24" fill="#333" />
                </el-icon>
            </div>
        </el-tooltip>
    </div>
</template>

<style scoped>
.toolbar-container {
    display: flex;
    gap: 10px;
}

.botton {
    z-index: 150;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: solid 1px rgba(0, 0, 0, 0.4);
}

.botton:hover {
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
</style>
